<template>
  <div class="products">
    <a-card>
      <h2>员工管理列表</h2>
      <a-divider></a-divider>
      <div class="search">
        <a-input-search placeholder="请根据员工真实姓名进行搜索" enter-button v-model:value="keyword" @search="onSearch" />
        <a v-if="isSearch" href="javascript:;" @click="back">返回</a>
      </div>
      <a-table :rowKey="(record,index)=> index" :columns="columns" :data-source="list" :pagination='false'>
        <template #sex="{record}">
          {{record.sex==0?'男':'女'}}
        </template>
        <template #birthday="{record}">
          {{timeTransfer(record.birthday)}}
        </template>
        <template #marriage="{record}">
          {{record.marriage==0?'未婚':record.marriage==1?'已婚':'离异'}}
        </template>
        <template #actions="{record}">
          <a href="javascript:;" @click="remove(record)">删除</a>
        </template>
      </a-table>
      <a-pagination class="pagi" v-model:current="current" :total="total" :page-size="5" @change="setPage"></a-pagination>
    </a-card>
  </div>
</template>

<script>
import { defineComponent, ref, onMounted } from "vue";
import { message } from "ant-design-vue";
import { personalDetail } from "@/service";
import { timeTransfer } from "../../utils/timeTransfer";
export default defineComponent({
  components: {},
  setup() {
    const columns = [
      {
        title: "用户编号",
        dataIndex: "account",
      },
      {
        title: "姓名",
        dataIndex: "realName",
      },
      {
        title: "性别",
        slots: {
          customRender: "sex",
        },
      },
      {
        title: "生日",
        slots: {
          customRender: "birthday",
        },
      },
      {
        title: "手机号码",
        dataIndex: "phoneNumber",
      },
      {
        title: "籍贯",
        dataIndex: "home",
      },
      {
        title: "婚姻状况",
        slots: {
          customRender: "marriage",
        },
      },
      {
        title: "操作",
        slots: {
          customRender: "actions",
        },
      },
    ];
    /**搜索 */
    const keyword = ref("");
    const isSearch = ref(false);
    const onSearch = () => {
      getList();
      if (keyword.value != "") {
        isSearch.value = true;
      }
    };
    //返回
    const back = () => {
      isSearch.value = false;
      keyword.value = "";
      getList();
    };

    const list = ref([]);
    const current = ref(1);
    const total = ref(0);
    const setPage = (page) => {
      current.value = page;
      // console.log("current.value222", current.value);
      getList();
    };

    const getList = async () => {
      const res = await personalDetail.list(current.value, 5, keyword.value);
      if (res.data.code == 200) {
        console.log("personalDetail__getList成功", res.data);
        message.success(res.data.msg);
        list.value = res.data.data.list;
        total.value = res.data.data.total;
      }
    };
    onMounted(() => {
      getList();
    });

    const remove = async ({ _id }) => {
      const res = await personalDetail.remove(_id);
      if (res.data.code == 200) {
        message.success("删除成功");
        getList();
      }
    };
    return {
      columns,
      keyword,
      isSearch,
      onSearch,
      back,
      current,
      total,
      setPage,
      list,
      timeTransfer,
      remove,
    };
  },
});
</script>

<style lang='less' scoped>
@import url("../../assets/styles/common.less");
</style>